<template>
  <div>
    <!-- <h2>{{ count }}</h2>

    <h2>{{ num }}</h2>

    <button @click="count++">修改count</button>
    <button @click="change">修改num</button> -->

    <h2>{{ user.name }}</h2>

    <h2>{{ user.info.age }}</h2>

    <button @click="changeUser">修改用户</button>
  </div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'

const count = ref(1)
const num = ref(10)

const change = () => {
  num.value++
  // count.value++
}

const user = reactive({
  name: 'harry',
  info: {
    age: 29,
    gender: '男'
  }
})
const changeUser = () => {
  // user.name = 'despot'

  user.info.age++
}

//1.监听响应式数据 watch(要监听的数据，回调函数,监听选项{immediate,deep})
// watch(count, (newValue, oldValue) => {
//   console.log('我改变了')
//   console.log(newValue)
//   console.log(oldValue)
// })

//2.监听多个响应式数据,watch([数据1，数据2，...],([新的数据1，新的数据2,...]) => {})
// watch([count, num], ([newCount, newNum], oldValue) => {
//   console.log('我改变了')
//   console.log(newCount)
//   console.log(newNum)
// })

// watch(count, () => {
//   console.log('count修改了')
// })

// watch(num, () => {
//   console.log('num修改了')
// })

//3.监听复杂数据类型
// watch(user, (newValue, oldValue) => {
//   console.log(newValue)
//   console.log(oldValue)
//   console.log('我修改了')
// })

//4.要监听对象的单个属性需要写成函数形式
// watch(
//   () => user.name,
//   (newValue, oldValue) => {
//     console.log(newValue)
//     console.log(oldValue)
//     console.log('我修改了')
//   }
// )

//5.如果要监听对象中的对象需要开启deep深度监听
watch(
  () => user.info,
  (newValue, oldValue) => {
    console.log(newValue)
    console.log(oldValue)
    console.log('我修改了')
  },
  {
    immediate: true,
    deep: true //深度监听
  }
)
</script>
<style lang="less"></style>
